<template>
  <Header></Header>
  <el-container style="min-height: calc(100vh - 55px);" class="container">
    <el-aside width="200px" class="menu">
      <el-menu>
        <el-menu-item index="1">稳定生息</el-menu-item>
        <el-menu-item index="2">稳定增强</el-menu-item>
        <el-menu-item index="3">活动专区</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main class="content">
      <el-input placeholder="产品名称" v-model="searchQuery" class="search-input"></el-input>
      <el-button type="success" style="margin-bottom: 20px;margin-left: 20px">搜索</el-button>
      <el-row :gutter="20" class="products">
        <el-col :span="8" v-for="currency in filteredCurrencies" :key="currency.value">
          <el-card shadow="hover">
            <div class="currency-card">
              <div class="currency-icon">{{ currency.icon }}</div>
              <div class="currency-info">
                <h3>{{ currency.label }}</h3>
                <p>参考年化: {{ currency.interestRate }}%</p>
                <el-radio-group v-model="currency.selectedOption" @change="updateInterestRate(currency)">
                  <el-radio-button
                      v-for="option in currency.options"
                      :label="option"
                      :key="option">
                    {{ option === '活期' ? '活期' : option + '天' }}
                  </el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
  <Footer></Footer>
</template>

<script setup>
import { ref, computed } from 'vue';
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";

const currencies = ref([
  {
    value: 'BCT',
    label: '比特币',
    icon: '🅱️',
    baseInterestRate: 0.11,
    selectedOption: 7,
    options: [7, 30, 180, 360, '活期'],
    additionalRates: [0.01, 0.02, 0.03, 0.04, 0]
  },
  {
    value: 'ETH',
    label: '以太坊',
    icon: '💎',
    baseInterestRate: 0.12,
    selectedOption: 7,
    options: [7, 30, 180, 360, '活期'],
    additionalRates: [0.015, 0.025, 0.035, 0.045, 0]
  },
  {
    value: 'CGT',
    label: 'CGT',
    icon: '💹',
    baseInterestRate: 0.13,
    selectedOption: 7,
    options: [7, 30, 180, 360, '活期'],
    additionalRates: [0.02, 0.03, 0.04, 0.05, 0]
  }
]);

const searchQuery = ref('');

const filteredCurrencies = computed(() => {
  return currencies.value.filter(currency =>
      currency.label.includes(searchQuery.value)
  );
});

function updateInterestRate(currency) {
  const index = currency.options.indexOf(currency.selectedOption);
  currency.interestRate = currency.baseInterestRate + currency.additionalRates[index];
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin-top: 55px;
}

.menu {
  background-color: #f4f4f4;
}

.content {
  flex: 1;
  padding: 20px;
}

.search-input {
  margin-bottom: 20px;
  width: 60%;
}

.products {
  flex-wrap: wrap;
}

.currency-card {
  display: flex;
  align-items: center;
}

.currency-icon {
  font-size: 2em;
  margin-right: 10px;
}

.currency-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

</style>